<!--
 * @Descripttion: 描述
 * @Author: 刘黎
 * @Date: 2024-07-03 13:33:39
 * @LastEditors: 刘黎
 * @LastEditTime: 2024-08-13 19:11:59
-->
<template>
  <div class="indexPage">
		<div class="asideClass">
      <asides @getObtainRoute="obtainRoute"></asides>
    </div>
    <div class="rightClass">
      <el-tabs
        v-model="tableTabsValue"
        type="card"
        class="topMenu demo-tabs"
        closable
        @tab-remove="removeTab"
        @click="topMenuCLick"
      >
        <el-tab-pane
          v-for="item in tableTabs"
          :key="item.path"
          :label="item.name"
          :name="item.path"
        />
      </el-tabs>
      <router-view></router-view>
    </div>
	</div>
</template>


<script setup>
import asides from './layout/asides.vue';
import { ref,onMounted,defineComponent } from 'vue';
import { useRouter } from "vue-router";
import { menuTabStore } from '@/store/index.js';
const router = useRouter();
defineComponent({
  components:{
    'asides': asides // 注册局部组件
  }
});

onMounted(()=>{
  
})

let tableTabs = ref([])
let tableTabsValue = ref('')
// let routeView = ref("")
const obtainRoute = (row) => {
  console.log('1111122223333333334444444444455555555555')
  console.log(row)
  tableTabs.value = menuTabStore().list
  // routeView.value = path
}

function removeTab(row) {
  tableTabs.value.forEach((element,index) => {
    if(element.path === row){
      tableTabs.value.splice(index,1)
    }
  })
  menuTabStore().list = tableTabs.value
}

function topMenuCLick() {
  router.push({ path: tableTabsValue.value })
}

</script>


<style lang="scss" scoped>
.indexPage{
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  height: 100vh;
  overflow-x: auto;
  overflow-y: hidden;
  background: #FAFAFA;
  .rightClass{
    flex: 1;
    height: 100%;
    overflow-y: auto;
    font-size: 12px;
  }
}
.topMenu{
  padding: 0 20px;
  ::v-deep .el-tabs__header{
    margin: 0;
  }
}
</style>
